var gulp = require('gulp');
var del = require('del');
var path = require('path');
var uglify = require('gulp-uglify');
var minifyCSS = require('gulp-cssnano');
var postcss = require('gulp-postcss'); // CSS 预处理
// var postcssPxtorem = require('postcss-pxtorem'); // 转换 px 为 rem
var postcssAutoprefixer = require('autoprefixer');
var rev = require('gulp-rev');
var revReplace = require("gulp-rev-replace");
var revCollector = require('gulp-rev-collector');

var paths = {
    src: {
        dir: './src',
        img: './src/img/**/*.{JPG,jpg,png,gif,svg}',
        slice: './src/slice/**/*.png',
        js: './src/**/*.js',
        media: './src/media/**/*',
        less: './src/css/style-*.less',
        sass: './src/css/style-*.scss',
        css: './src/**/*.css',
        html: './src/**/*.html',
        htmlAll: './src/html/**/*',
        php: './src/**/*.php',
        svg: './src/svg/**/*.svg',
        jsCommon: './src/public/js/common/**/*.js'
    },
    tmp: {
        dir: './tmp',
        css: './tmp/css',
        img: './tmp/img',
        html: './tmp/html',
        sprite: './tmp/sprite',
        js: './tmp/js',
        svg: './tmp/svg',
        symboltemp: './tmp/symboltemp/',
        symbol: './tmp/symbolsvg'
    },
    dist: {
        dir: './dist',
        css: './dist/css',
        img: './dist/img',
        html: './dist/pages',
        sprite: './dist/sprite'
    }
};


var postcssOption = [
    postcssAutoprefixer({
        browsers: ['last 8 versions']
    })
]

// 清除 dist 目录
function delDist() {
    return del([paths.dist.dir]);
}

// 清除 tmp 目录
function delTmp() {
    return del([paths.tmp.dir]);
}

function delSVG() {
    return del([paths.tmp.symboltemp]);
}


//css
function compileAutoprefixer() {
    return gulp.src(paths.src.css)
        .pipe(postcss(postcssOption))
        .pipe(minifyCSS({
            safe: true,
            reduceTransforms: false,
            advanced: false,
            compatibility: 'ie7',
            keepSpecialComments: 0
        }))
        .pipe(gulp.dest(paths.dist.dir))
        .pipe(rev())
        .pipe(rev.manifest())
        .pipe(gulp.dest('./tmp/css'));
}

//JS
function compileJs() {
    return gulp.src(paths.src.js)
        .pipe(uglify())
        .pipe(gulp.dest(paths.dist.dir))
        .pipe(rev())
        .pipe(rev.manifest())
        .pipe(gulp.dest('./tmp/js'));
}

function copyJs() {
    return gulp.src(paths.src.jsCommon)
        .pipe(gulp.dest('./dist/public/js/common/'))
}

//html
function compileHtml() {
    var manifest = gulp.src('./tmp/**/*.json');

    function modifyReved(filename) {
        // filename是：admin.69cef10fff.cache.css的一个文件名  
        // 在这里才发现刚才用gulp-rev-format的作用了吧？就是为了做正则匹配，
        var lastIndex = filename.lastIndexOf('-');
        var _filename = filename.substring(0, lastIndex);
        var _version = filename.substr(lastIndex + 1, 10);
        var _ext = filename.substr(lastIndex + 11)
        // if (filename.lastIndexOf('.') > -1) {
        //     // 通过正则和relace得到版本号：69cef10fff  
        //     const _version = filename.match(/\.[\w]*\.cache/)[0].replace(/(\.|cache)*/g, "");
        //     // 把版本号和gulp-rev-format生成的字符去掉，剩下的就是原文件名：admin.css  
        //     const _filename = filename.replace(/\.[\w]*\.cache/, "");
        //     // 重新定义文件名和版本号：admin.css?v=69cef10fff  
        //     filename = _filename + "?v=" + _version;
        //     // 返回由gulp-rev-replace替换文件名  
        //     return filename;
        // }

        return _filename + _ext + '?v=' + _version;
    }
    return gulp.src(paths.src.html)
        .pipe(revReplace({
            manifest: manifest,
            modifyReved: modifyReved
        }))
        .pipe(gulp.dest(paths.dist.dir));
}

gulp.task('default', gulp.series(
    gulp.parallel(
        delDist,
        delTmp
    ),
    compileAutoprefixer,
    compileJs,
    copyJs,
    compileHtml
));